<template>
  <div class="temp-admin" style="padding-bottom: 80px">
    <div class="temp-wrapper" v-if="addressList.length">
      <div class="item" v-for="(item, index) in addressList" :key="index">
        <van-radio-group v-model="radio" direction="horizontal" v-if="type == 'select' && addressList.length > 0" style="margin-bottom: 12px">
          <van-radio :name="item.id" >选择当前就诊者</van-radio>
        </van-radio-group>
        <div class="title">
          <div class="name">
            <div class="left">
              {{ item.name }}
              <div class="marin">{{ item.sex == 1 ? "女" : "男" }}</div>
              <span class="age">{{ item.age }}岁</span>
            </div>
            <div class="right">
              <van-icon
                :name="`${staticPath}/icon_shanchu @2x.png`"
                size="24px"
                @click="handleEdit(item)"
              />
            </div>
          </div>
          <div class="idcard">
            <span class="label">身份证</span
            ><span class="num">{{ item.id_number | formatidcard }}</span>
          </div>
        </div>
        <div class="van-hairline--top"></div>
        <div class="footer">
          <div class="left" @click="() => $router.push({path: `/user/office/edit/${item.id}`})">
            <van-checkbox
              v-model="item.is_default"
              style="pointer-events: none"
              checked-color="#4ECE40"
              >{{item.is_default == 1 ? '已设为默认' : '设为默认'}}</van-checkbox
            >
          </div>
          <div class="right">
            <van-icon name="delete-o" size="18px" @click="handleDel(item)" />
          </div>
        </div>
      </div>
      <van-button color="#4ECE40" block plain v-if="type == 'select' && addressList.length > 0" @click="handleSelect">确定选择</van-button>
    </div>
    <div class="add-new">
      <van-button color="#4ECE40" block to="/user/office/add"
        >新增就诊人</van-button
      >
    </div>
  </div>
</template>

<script>
import { memberList, memberDel } from "@/service/server"
import { GetQueryString } from '@/utils/index'
export default {
  data() {
    return {
      checked: true,
      addressList: [],
      staticPath: process.env.VUE_APP_STATIC_PATH,
      type: '',
      redirect: '',
      radio: null
    };
  },
  created() {
    console.log('keep alive?')
    this.queryAddress();
    this.type = GetQueryString('type')
    this.redirect = decodeURIComponent(GetQueryString('redirect'))
    console.log(decodeURIComponent(GetQueryString('redirect')))
  },
  activated(){
    this.queryAddress();
  },
  methods: {
    handleSelect(){
      if(!this.radio) return this.$toast('请选择一个就诊人')
      let query = this.addressList.filter(item => item.id === this.radio)[0];
      this.$store.commit('user/SET_MEMBER_INFO',query)
      this.$router.replace({
        path: this.redirect
      })
    },
    handleDel(item) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确定要删除吗?",
        })
        .then(async () => {
          let result = await memberDel(item.id);
          if (result.status == 204) {
            this.queryAddress();
            this.$toast("删除成功");
          } else {
            this.$toast(result.message);
          }
        })
        .catch(() => {
          // on cancel
        });
    },
    handleEdit(item) {
      this.$router.push({
        path: `/user/office/edit/${item.id}`,
      });
    },
    async queryAddress() {
      let result = await memberList();
      if (result.status == 200) {
        this.addressList = result.data.model;
      } else {
        this.$toast(result.message);
      }
    },
  },
};
</script>

<style lang="less">
.temp-admin {
  height: 100vh;
  background: #f5f5f5;
  .temp-wrapper {
    height: calc(100% - 70px);
    padding: 10px;
    .idcard {
      .name {
        margin-right: 20px;
      }
    }
    .item {
      border-radius: 6px;
      background: #fff;
      padding: 15px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-bottom: 12px;
      width: 100%;

      .name {
        font-size: 16px;
        color: #000;
        display: flex;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
          flex: 1;
          display: flex;
          justify-content: flex-start;
        }
        &::after {
          content: "";
          display: block;
        }
        .marin {
          margin: 0 8px;
          color: #999;
          font-size: 14px;
        }
        .age {
          color: #999;
          font-size: 14px;
        }
      }
      .title {
        flex-direction: column;
        justify-content: flex-start;
        margin-bottom: 10px;
      }
      .footer {
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
      }
      .title,
      .footer {
        flex: 1;
        display: flex;
      }
    }
  }
  .add-new {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: #fff;
    height: 70px;
    padding: 10px 30px;
  }
}
</style>